<template>
  <el-form>
    <el-form>
      <el-button type="primary" round @click="add,Adrawer = true">添加用户</el-button>
      <el-input v-model="input" style="width: 240px" placeholder="输入姓名或者用户名" />
      <el-button type="primary"  @click="Search">搜索</el-button>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="id" label="ID" width="150" />
    <el-table-column prop="name" label="姓名" width="120" />
    <el-table-column prop="username" label="用户名" width="120" />
    <el-table-column prop="password" label="密码" width="120" />
    <el-table-column prop="avatar" label="图片" width="160" />

    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="update(scope.row),drawer = true">
          修改
        </el-button>
        <el-button link type="primary" size="small" @click="deletes(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <!-- 修改抽屉 -->
    <div>
      <el-drawer v-model="drawer" title="I am the title" :with-header="false">
        <el-button @click="closeDrawer">关闭</el-button>
        <div>
          <el-form :model="updataInfo" label-position="left" label-width="80px" ref="product_add">
            <el-form-item label="id:">
              <el-input v-model="updataInfo.id" placeholder="请输入id"></el-input>
            </el-form-item>
            <el-form-item label="姓名:">
              <el-input v-model="updataInfo.name" placeholder="请输姓名"></el-input>
            </el-form-item>
            <el-form-item label="用户名:">
              <el-input v-model="updataInfo.username" placeholder="请输用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码:">
              <el-input v-model="updataInfo.password" placeholder="请输密码"></el-input>
            </el-form-item>
            <el-form-item label="照片:">
              <el-input v-model="updataInfo.avatar" placeholder="请保存照片"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(updataInfo)">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
    </div>
    <!-- 添加抽屉 -->
    <div>
      <el-drawer v-model="Adrawer" title="I am the title" :with-header="false">
        <el-button @click="closeDrawer">关闭</el-button>
        <div>
          <el-form :model="addInfo" label-position="left" label-width="80px" ref="product_add">
            <el-form-item label="姓名:">
              <el-input v-model="addInfo.name" placeholder="请输姓名"></el-input>
            </el-form-item>
            <el-form-item label="用户名:">
              <el-input v-model="addInfo.username" placeholder="请输用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码:">
              <el-input v-model="addInfo.password" placeholder="请输密码"></el-input>
            </el-form-item>
            <el-form-item label="照片:">
              <el-input v-model="addInfo.avatar" placeholder="请保存照片"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submit(addInfo)">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
    </div>
  </el-form>
</template>

<script lang="ts" setup>
// export default {
//   name: "Student"
// }
import {reactive, ref} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";
const input = ref('')

const tableData = ref([])

const  drawer = ref(false)

const Adrawer = ref(false)
const closeDrawer = () =>{
  drawer.value = false
  location.reload()
}
const Search = () =>{
  axios({
    method:"get",
    url:"/api/admin/getLike/"+input.value
  }).then(res=>{
    console.log(res)
     tableData.value = res.data
  }).catch(err => {
    console.error(err);
  })
}

const InitData = ()=>{
  axios({
    method:"get",
    url:"/api/admin/all"
  }).then(res=>{
    console.log(res)
    tableData.value = res.data
  }).catch(err => {
    console.error(err);
  })
}
InitData();

let addInfo = reactive({
  name: '',
  username: '',
  password: '',
  avatar: ''
})

const add = (item) =>{
  addInfo.name = item.name
  addInfo.username = item.username
  addInfo.password = item.password
  addInfo.avatar = item.avatar
  console.log(addInfo)
}

const submit = (A)=>{
  axios({
    method:"post",
    url:"/api/admin/pos",
    data: A
  }).then(res=>{
    console.log(res.data)
    const data = res.data
    console.log(data)
    if (res.status === 200 ){
      ElMessage.success("添加成功")
      location.reload()
    }
  }).catch(err => {
    console.error(err);
  })
}


let updataInfo = reactive({
  id: '',
  name: '',
  username: '',
  password: '',
  avatar: ''
})
const update = (item) =>{
  updataInfo.id = item.id
  updataInfo.name = item.name
  updataInfo.username = item.username
  updataInfo.password = item.password
  updataInfo.avatar = item.avatar
  console.log(updataInfo)

}
const submitForm = (T)=>{
  axios({
    method:"post",
    url:"/api/admin/pos",
    data: T
  }).then(res=>{
    console.log(res.data)
    const data = res.data
    console.log(data)
    if (res.status === 200 ){
      ElMessage.success("修改成功")
      location.reload()
    }
  }).catch(err => {
    console.error(err);
  })
}

const deletes = (item) =>{
  console.log(item.id)
  axios({
    method:"delete",
    url:"/api/admin/delete/"+item.id,
  }).then(res=>{
    ElMessage.success(res.data.msg)
    location.reload()
  }).catch(err=>{
    console.log(err)
  })
}
</script>

<style scoped>
</style>
